<template>
 
 <el-container>
  <header >
    <HeaderVue></HeaderVue>
    
  </header>

  <router-view></router-view>

  <el-footer style="padding: 0;">
    <FooterVue></FooterVue>
  </el-footer>
</el-container>

</template>
<script>
import HeaderVue from './components/Header.vue'
import FooterVue from './components/Footer.vue'

  export default{
    name:'appCom',
    data(){
      return{

      }
    
    },
    mounted(){
      this.$store.commit("extraFun")//启动外部数据
    },
    components:{
      HeaderVue,
      FooterVue,
      
    }
    // mounted(){
    //   let screenWidth=this.$store.state.screenWidth;
    // }

  }
</script>
<style lang="less">
body{
  margin: 0;
  padding: 0;
}

.Home{
  .headnews{
    .el-divider__text{
          margin-top: -3px;
          background-color: rgb(8, 45, 94);
          
          }
  }
  .comnews{
    .el-divider__text{
          margin-top: -3px;
          background-color: #cce1fa;
        
          }
    .el-divider--horizontal{
      border-top-color: rgb(8, 45, 94);
    }
  }
   .learning{
    .el-divider__text{
          margin-top: -3px;
          background-color: #eaeef5;
         
          }
    .el-divider--horizontal{
      border-top-color: rgb(8, 45, 94);
    }
  }
   .thelast{
    .el-divider__text{
       margin-top: -3px;
          background-color: #eaeef5;
          
          }
    .el-divider--horizontal{
      border-top-color: rgb(8, 45, 94);
    }
    }
    .story{
    .el-divider__text{
          margin-top: -3px;
          background-color: rgb(8, 45, 94);
         
          } 
           .el-divider--horizontal{
      border-top-color: aliceblue;
    }
  }

  
}

.List{
  .el-card{
    .el-card__header{
      padding: 0;
      background-color: rgb(112, 175, 247);
      height: 40px;
      line-height: 40px;
      padding: 0 20px;
      .el-breadcrumb{
      .el-breadcrumb__item:first-child{
        background: url(@/assets/img/home.png) no-repeat left center;
        padding-left: 25px;
      }
    }
    }
      .el-card__body{
    background-color: aliceblue;
    
  
    }
  
  }
  .bar{
    .el-card{
    .el-card__header{
    
      background-color: rgb(242, 195, 134);
      height: 40px;
      border-bottom: 1px solid brown;
      .el-breadcrumb{
        margin-right: -18px;
   
    }

    }
        .el-card__body{
   padding: 0;
    
  
    }
  
  }
  .newest{
     .el-card__header{
      background-color: rgb(112, 175, 247);
      height: 40px;
      border-bottom: 1px solid rgb(16, 46, 128);
  

    }
     .el-card__body{
    padding: 1px 0;


  
    }
     
  }
  }
}
.Detail{
  .el-card{
      .el-card__body{
        .img{
          img{
            width: 100%;
          }
        }
    }
  }
  }





</style>
